<script setup>
import Footer from '@/components/footer.vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue';
import qs from 'qs';

const router = useRouter();
const route = useRoute();

const orderTypeId = ref(route.query.orderTypeId);
const businessArr = ref([]);
const user = ref({});

// 在组件挂载时执行
onMounted(() => {
  // 从sessionStorage中获取用户信息
  user.value = JSON.parse(sessionStorage.getItem('user'));

  // 根据orderTypeId查询商家信息
  axios.post('http://localhost/business/BusinessController/listBusinessByOrderTypeId', qs.stringify({
    orderTypeId: orderTypeId.value
  })).then(response => {
    businessArr.value = response.data;
    // 判断是否登录
    // if (user.value) {
    //   listCart();
    // }
    listCart();
  }).catch(error => {
    console.error(error);
  });
});

// 查询购物车中的商品数量
const listCart = () => {
  axios.post('http://localhost/cart/CartController/listCart', qs.stringify({
    userId: user.value.userId
  })).then(response => {
    const cartArr = response.data;
    // 遍历所有商家列表
    businessArr.value.forEach(businessItem => {
      businessItem.quantity = 0;
      cartArr.forEach(cartItem => {
        if (cartItem.businessId === businessItem.businessId) {
          businessItem.quantity += cartItem.quantity;
        }
      });
    });
    // 对商家列表进行排序
    // businessArr.value.sort((a, b) => a.businessId - b.businessId);
  }).catch(error => {
    console.error(error);
  });
};

// 跳转到商家信息页面
const toBusinessInfo = (businessId) => {
  router.push({ path: '/businessInfo', query: { businessId: businessId } });
};
</script>

<template>
  <div class="wrapper">
    <!--header-->
    <header>
      <p>商家列表</p>
    </header>
    <!--商家列表部分-->
    <ul class="business">
      <li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
        <div class="business_img">
          <img :src="item.businessImg" alt="商家图片">
          <div class="business_img_quantity" v-show="item.quantity>0">
            {{item.quantity}}
          </div>
        </div>
        <div class="business_info">
          <h3>{{ item.businessName }}</h3>
          <p>￥{{ item.starPrice }}起送 | ￥{{ item.deliveryPrice }}配送</p>
          <p>{{ item.businessExplain }}</p>
        </div>
      </li>
    </ul>
    <Footer></Footer>
  </div>

</template>

<style scoped lang="less">
/**********总容器**********/
.wrapper{
  width: 100%;
  height: 100%;
}
/**********header**********/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
/**********商家列表部分**********/
.wrapper .business{
  width: 100%;
  margin-top: 12vw;
  margin-bottom: 14vw;
}
.wrapper .business li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #ddd;
  user-select: none;
  cursor: pointer;

  display: flex;
  align-items: center;
}
.wrapper .business li .business_img{
  position: relative;
  /*相对定位*/
}
.wrapper .business li .business_img img{
  width: 20vw;
  height: 20vw;
}
.wrapper .business li .business_img .business_img_quantity{
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  /*绝对定位*/
  right:-1.5vw;
  top:-1.5vw;
}
.wrapper .business li .business_info{
  margin-left: 3vw;
}
.wrapper .business li .business_info h3{
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business_info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
</style>